// src/components/StudyPage.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const StudyPage = () => {
  const [word, setWord] = useState('');
  const [meaning, setMeaning] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchRandomWord();
  }, []);

  const fetchRandomWord = async () => {
    setIsLoading(true);
    try {
      const response = await axios.get('/api/random-word'); // 假设后端API的路由为 '/api/random-word'，用于获取随机单词
      setWord(response.data.word);
      setMeaning(response.data.meaning);
      setIsLoading(false);
    } catch (error) {
      console.error('Error fetching random word:', error);
      setIsLoading(false);
    }
  };

  const handleNextWord = () => {
    fetchRandomWord();
  };

  return (
    <div>
      <h2>Study Page</h2>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <div>
          <p>Word: {word}</p>
          <p>Meaning: {meaning}</p>
          <button onClick={handleNextWord}>Next Word</button>
        </div>
      )}
    </div>
  );
};

export default StudyPage;
